<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/props">Props</router-link>
    <router-link to="/custom_event">CustomEvent</router-link>
    <router-link to="/event_bus">EventBus</router-link>
    <router-link to="/v_model">VModel</router-link>
    <router-link to="/useAttrs">useAttrs</router-link>
    <router-link to="/ref_parent">RefParent</router-link>
    <router-link to="/provide_inject">ProvideInject</router-link>
    <router-link to="/pinia">Pinia</router-link>
    <router-link to="/slot">Slot</router-link>
    <router-link to="/element">Element</router-link>
    <router-link to="/elementTable">ElementTable</router-link>
    <br />
  </nav>
  <router-view />
</template>

<style>
a {
  margin: 10px;
}

nav {
  padding: 30px;
  display: flex;
  width: 100%;
}

nav a {
  text-decoration: none;
  font-weight: bold;
  color: blue;
  box-shadow: 1px 1px 1px #ccc;
  background-color: antiquewhite;
}

nav a.router-link-exact-active {
  color: aqua;
  box-shadow: 2px 2px 2px #ccc;
}
</style>
<script setup lang="ts">
</script>